import * as echarts from 'echarts';

//TMS激活终端类型占比
export function getOptionsForAppAllPie(data){
  let colorList = [
    "#329BFF",
    "#48DCF3",
    "#FFD042",
    "#F3488C",
    "#5F48F3",
    "#F39348","#A048F3","#48F3C1","#F34848","#48F381"];
  function generateRandomColorList(count) {
    const colorList = [];
    for (let i = 0; i < count; i++) {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      colorList.push(`rgb(${r},${g},${b})`);
    }
    return colorList;
  }
  // 超出制定颜色多余生成随机颜色
  if(data.length >10) colorList = colorList.concat(generateRandomColorList(data.length-10))
  const option = {
    grid:{
      // left: '5%',
      // right: '8%',
      // bottom: '5%',
      // top: '30%',
      // containLabel: true,
      
    },
    title: {
      text:'{name|全部} \n {val|' + data.reduce((accumulator, currentValue) => accumulator + parseInt(currentValue.value), 0).toLocaleString()+'}',
      x: 'center',
      y: '34%',
      textStyle: {
        rich: {
          val: {
              fontSize: 20,
              fontWeight: 'bold',
              color: '#fff',
              padding:[0,0,0,0]
          },
          name: {
              fontSize: 18,
              fontWeight: 'bold',
              color: '#fff',
              padding: [10, 0, 0, 0],
          },
        }}
    },
    tooltip: {
      backgroundColor:"rgba(0,0,0,0)",
      borderColor:"rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable:true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding:[0],
      trigger: "item",
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      // formatter: function (params) {
      //   return params.name + ':' + params.value  +'<br/>' + params.percent + '%';
      // },
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        // const titleBoxWidth = document.querySelector('.tms-pie-tool-tip')?(document.querySelector('.tms-pie-tool-tip').offsetWidth):''
        const pointX = point[0]+30
        const pointY = point[1]
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX
        } else {
          // 默认紧贴光标右侧显示
          x = pointX+30
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY
        } else {
          // 默认紧贴光标上侧显示
          y = pointY
        }
        // 记录提示框位置
        // if (window.tooltipSpace?.position) window.tooltipSpace.position = [x, y]
        return [x, y]
      },
      formatter: (params) => {
        return `<div class="tms-pie-tool-tip">
                  <div class="title">${params.name}：</div> 
                  <p class="first-child">${Number(params.value).toLocaleString()}次</p>
                  <p class="last-item">(${params.percent}%)</p>
                <div>`
      }
    },
    legend: {
      icon: 'rect',
      orient: 'vertical', // 横向显示图例
      pageIconColor: '#ff781f', // 设置翻页箭头颜色
      type: 'scroll',
      pageTextStyle: {
        color: '#fff' // 设置翻页数字颜色
      },
      pageIconSize: 11, // 设置翻页箭头大小
      textStyle: { // 设置图例文字的样式
        color: '#fff',
        fontSize: 15
      },
      itemHeight: 10, // 设置图例项的高度
      itemWidth: 15, // 设置图例项的宽度
      left: "5%",
      right: "0%",
      top: "10%",
      width: 500,
      height: '70%', // 设置图例高度
      itemGap: 20,
      formatter: function(name){
          return `${name}`;
      }
    },
    series: [
      {
        type: "pie",
        radius: ['25%', '40%'],
        center:['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: "center"
        },
        itemStyle: {
            normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
            }
        },
        labelLine: {
            show: false
        },
        data: data
      }
    ]
  };
  return option
}
export function getOptionsForRankBar(xData, yData, yLabel){
  var option = {
    grid: {
        left: '5%',
        right: '8%',
        bottom: '5%',
        top: '10%',
        containLabel: true,
    },
    legend: {//图例组件，颜色和名字
      icon: 'rect',
      right: 10,
      top: 15,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
        textStyle: {
          color: '#fff',
          opacity:'0.6',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 15,            
      }
  },    
    tooltip: {
        show: false,
        trigger: "item",
        backgroundColor:"rgba(0,0,0,0)",
        borderColor:"rgba(0,0,0,0)",
        triggerOn: "mousemove",
        enterable:true,
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)',
        padding:[0],
        textStyle: {
          color: '#fff', // 文本颜色
          fontSize: 24, // 文本大小
          fontWeight: 500,
        },
         formatter: "<span style='font-size:16px;'>{c}次</span>",
    },
    xAxis: {
        show: true,
        data: xData,
        axisLabel: { //x坐标轴设置
          interval: 0,
          color: '#fff',
          fontSize: '15',
        },
        axisLine: {
            show: true, // X轴 网格线 颜色类型的修改
            lineStyle: {
                type: 'solid',
                //  opacity: '0.15',
                color: 'rgba(77, 128, 254, 0.2)',
            },
        },
    },
    yAxis: [
        {
            type: 'value',
            inverse: false,
            axisLabel: {
                show: true,
                margin: 25,
                textStyle: {
                    color: '#fff',
                    fontSize: '15',
                    fontWeight: 'bolder',
                },
                formatter: function (value) {
                  if (value >= 10000) {
                    return (value / 10000).toFixed(1).replace(/(\.0+$)/, "")+'w'; 
                  } else {
                      return value.toLocaleString()
                  }
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                  show: true, // X轴线 颜色类型的修改
                  lineStyle: {
                      type: 'solid',
                      color: 'rgba(77, 128, 254, 0.2)',
                  },
              },        
            data: yLabel,
        },
    ],
    series: [
        {
            name: '',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#48DCF3',
                    },
                    {
                        offset: 1,
                        color: '#276CC9',
                    },
                ]),
                // shadowBlur: 0,
                // shadowColor: 'rgba(87,220,222,0.7)',
            },
            },
            label: {// 右侧label数字
                  show: true,
                  position: 'outside',
                  // rotate: 90, // 设置标签旋转90度，实现纵向显示
                  formatter: function(params) { return params.value.toLocaleString()},
                  textStyle: {
                    align: 'center', // 横向居中显示
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#fff', // 文本颜色
                    // padding:[0,-45,0,0]
                  }
          }, 
            barWidth: 40,
            data: yData,
        }
    ],
}
  return option;

}